import { useEffect, useState } from 'react'
import styles from './index.less'
import clxs from 'classnames'

interface TextShowProps {
	text: string,
	textShowComplete: () => void,
}

const TextShow = ({ text, textShowComplete }: TextShowProps) => {
	const [displayText, setDisplayText] = useState<string>('')
	const [showCursor, setShowCursor] = useState<boolean>(false)

	useEffect(() => {
		setShowCursor(true)
		if (text.length) {
			let index = 0
			// 创建一个定时器，每隔一定时间更新显示的文本
			const timer = setInterval(() => {
				setDisplayText((prevText) => {
					// 将下一个字符添加到当前显示的文本
					const nextChar = text[index]
					if (nextChar === '<' && (text[index] + text[index + 1] + text[index + 2] + text[index + 3]) === '<br>') {
						index += 4
						return prevText + '<br>'
					} else {
						index++
					}

					// 如果文本已经全部显示，则清除定时器
					if (index === text.length) {
						clearInterval(timer)
						setShowCursor(false)
						textShowComplete()
					}

					return prevText + nextChar
				})
			}, 30) // 设置更新的时间间隔
			return () => clearInterval(timer)
		}
		// 在组件卸载时清除定时器
	}, [text])

	return (
		<p className={clxs(styles.content, showCursor && styles.show_cursor)} dangerouslySetInnerHTML={{ __html: displayText }}></p>
	)
}
export default TextShow